<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
            table{
            border-collapse: collapse;
            margin: 20px auto;
        }
        tr{
            height: fit-content;
        }
        td{
            width: 100px;
            height: 50px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <input type="text" placeholder="行" id="col">
    <input type="text" placeholder="列" id="row">
    <button id="btn">生成</button>
    <section id="output">

    </section>
    <script>
        // ## 1.完善表格（有复制和删除按钮）
       var btn = document.querySelector('#btn')
       var col = document.querySelector('#col')
       var row = document.querySelector('#row')
       var output = document.querySelector('#output')
    
        btn.onclick = function () {
            var _col = col.value
            var _row = row.value
            var table = document.createElement('table')
            var tbody = document.createElement('tbody')
           
           
            
            table.appendChild(tbody)
            // 循环行
            for(var i = 0 ; i < _col ; i++){
                var tr = document.createElement('tr')
                // 偶数填颜色
                if(i % 2 === 0){
                    tr.style.background = '#ccc'
                }
                // 循环列
                for(var j = 0 ; j < _row ;j++ ){
                    var td = document.createElement('td')
                    td.innerHTML = '单元格' + i + j
                    tr.appendChild(td)
                }
                var td = document.createElement('td')
                var clone  = document.createElement('button')
                clone.innerHTML = '克隆'
                var del = document.createElement('button')
                del.innerHTML = '删除'
                
                td.appendChild(clone)
                td.appendChild(del)
                
                tr.appendChild(td)
                tbody.appendChild(tr)     
                clone.onclick = function(){
                    var a = this.parentNode.parentNode.cloneNode(true)

                    tbody.appendChild(a) 
                }
            
                del.onclick = function(){
                    tbody.removeChild(this.parentNode.parentNode)
                }
            }
            
         
            output.appendChild(table)
        }
      
    </script>
</body>
</html>